import React from 'react';
import Myinput from '@/components/myinput';
import MyButton from '@/components/mybutton';
import MyToast from '@/components/mytoast'
import { login } from '@/api';
import './index.scss';

class Com extends React.Component {
    constructor (props) {
        super(props);
        this.state={
            tel:'',
            telerrortip:'',
            password:'',
            passworderrortip:''
        }
    }
    render() {
        return (
            <div className="container">
                <div className="box">
                    <header className="header">登陆头部</header>
                    <div className="boox">
                        <div className="telbox">
                            <Myinput 
                            placeholder="请输入手机号"
                            clear
                            value={this.state.tel}
                            // label='手机号'
                            errortip={this.state.telerrortip}
                            onChange={ (val) => {
                                console.log('获取数据', val)
                                let myreg = /^[1][3,4,5,7,8][0-9]{9}$/
                                if(val.length === 0) {
                                this.setState({
                                    telerrortip: '',
                                    tel: val
                                })
                                } else if(!myreg.test(val)) {
                                this.setState({
                                    telerrortip: '手机号码格式错误',
                                    tel: val
                                })
                                } else {
                                this.setState({
                                    telerrortip: '√',
                                    tel: val
                                })
                                }
                            }}
                            />
                        </div>
                        <div className="passwordbox">
                            <Myinput 
                            type="password"
                            placeholder="请输入密码"
                            // label='密码'
                            clear
                            value={this.state.password}
                            errortip={this.state.passworderrortip}
                            onChange={ (val) => {
                                console.log('获取数据', val)
                                let passworderrortip = ''
                                if (val.length === 0) {
                                passworderrortip = ''
                                } else if (val.length < 6) {
                                passworderrortip = '密码格式错误'
                                } else {
                                passworderrortip = '√'
                                }
                                this.setState({
                                passworderrortip,
                                password: val
                                })
                            }}
                            />
                        </div>
                        <MyButton 
                        value="登陆"
                        type="success"
                        disabled = { this.state.telerrortip === '' || this.state.telerrortip === '手机号码格式错误' || 
                        this.state.passworderrortip === '' ||
                        this.state.passworderrortip === '密码格式错误'}
                        onClick={
                            () => {
                            console.log('按钮被点击了')
                            login({tel: this.state.tel, password: this.state.password}).then(res => {
                                if (res.data.code === '10086') {
                                // console.log('用户还未注册')
                                MyToast.info('用户还未注册!!!')
                                } else if (res.data.code === '10100') {
                                console.log('密码错误')
                                MyToast.danger('密码错误')
                                } else {
                                let userid = res.data.data.userid;
                                let username = res.data.data.username;
                                let token = res.data.data.token
                                localStorage.setItem('userid', userid)
                                localStorage.setItem('username', username)
                                localStorage.setItem('token', token)
                                this.props.history.goBack();
                                }
                            })
                            }
                        }
                        />
                    </div>
                </div>
            </div>
        )
    }
}

export default Com;